<template>
    <el-container class="page white">
        <el-header class="page-head">
            <PubTab :tabs="tabs" :active="active"></PubTab>
            <PubSearch v-bind="searchObj" />
        </el-header>
        <el-main>
            <PubTab :tabs="tabs" :active="active">
                <template #todo> todo</template>
            </PubTab>
            <PubSearch v-bind="searchObj2">
                <template #preSearch>
                    <el-col :span="16">
                        <el-form-item label="前置条件">
                            <el-input />
                        </el-form-item>
                    </el-col>
                </template>
            </PubSearch>
            <component is="el-input"></component>
        </el-main>
    </el-container>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import PubTab from '@/components/common/PubTab.vue'
import PubSearch from '@/components/common/PubSearch/index.vue'
import { ObjTypeEnum } from '@/enums'

const tabs = [{ label: '代办', name: 'todo' }, { label: '已办', name: 'done' }]
const active = ref('todo')

const searchColumns = [
    {
        prop: 'proId',
        label: '项目',
        type: 'select'
    },
    {
        prop: 'cycleId',
        label: '期间',
        type: 'select',
        tooltip: '请先选择项目'
    },
    {
        prop: 'batchNo',
        label: '批次',
        type: 'select'
    },
    {
        prop: 'sub_name',
        label: '证件号码',
    },
    {
        prop: 'iden_no',
        label: '受益对象',
        type: 'input'
    },
    {
        prop: 'status',
        label: '状态',
        type: 'select',
        options: [
            { value: -1, label: '待处理' },
            { value: 1, label: '处理中' },
            { value: -2, label: '异常' }
        ]
    },
    {
        prop: 'type',
        label: '发放到人/户/机构',
        type: 'enum',
        options: ObjTypeEnum,
        labelWidth: 136,
    },
    {
        prop: 'allow_approval',
        label: '是否可核批',
        type: 'boolean',
    },
    {
        prop: 'element',
        label: '要素',
        type: 'select',
        options: [
            { id: '01', name: "要素1" },
            { id: '02', name: "要素2" },
            { id: '03', name: "要素3" }
        ],
        optionLabel: 'name',
        optionValue: 'id'
    },
    {
        prop: 'date',
        label: '日期',
        type: 'date',
        pickerType: 'date'
    },
    {
        prop: 'year',
        label: '日期',
        type: 'date',
        pickerType: 'year'
    },
    {
        prop: 'date',
        label: '日期段',
        type: 'date',
        pickerType: 'daterange'
    },
    {
        prop: 'amt',
        label: '金额',
        type: 'number',
        precision: 2,
    },
    {
        prop: 'number',
        label: '数量',
        type: 'number',
        precision: 0,
    },
]
const searchObj = reactive({
    columns: searchColumns,
    searchParam: {},
})
const searchObj2 = reactive({
    columns: searchColumns.slice(0, 2),
    searchParam: {},
    showReset: false,
    count: 2,
})
</script>